<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone rotator演示(universal皮肤/固定尺寸)_素材火</title>

<link rel="stylesheet" href="css/allinone_bannerRotator.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_bannerRotator.js"></script>

<script>
$(function() {
	$('#allinone_bannerRotator_universal').allinone_bannerRotator({
		skin: 'universal',
		width: 960,
		height: 384,
		thumbsWrapperMarginBottom:-35,        
		autoHideBottomNav:false,
		showPreviewThumbs:false,
		defaultEffect: 'random'
	});
});
</script>
</head>

<body>
<h1>allinone rotator演示(universal皮肤/固定尺寸)</h1>

<!-- 代码开始 -->
<div style="width:960px; height:384px; margin: 0 auto;">
	<div id="allinone_bannerRotator_universal" style="display:none;"> 
		<!-- 图片 -->
		<ul class="allinone_bannerRotator_list">
			<li data-text-id="#allinone_bannerRotator_photoText1"><img src="images/classic/01_classic.jpg" alt="" /></li>
			<li data-text-id="#allinone_bannerRotator_photoText2"><img src="images/classic/02_classic.jpg" alt="" /></li>
			<li data-text-id="#allinone_bannerRotator_photoText3"><img src="images/classic/03_classic.jpg" alt="" /></li>
			<li data-text-id="#allinone_bannerRotator_photoText4"><img src="images/classic/04_classic.jpg" alt="" /></li>
			<li data-text-id="#allinone_bannerRotator_photoText5" data-link="http://www.sucaihuo.com/js/249.html" data-target="_blank"><img src="images/classic/05_classic.jpg" alt="" /></li>
		</ul>
		
		<!-- 文字 -->
		<div id="allinone_bannerRotator_photoText1" class="allinone_bannerRotator_texts">
			<div class="allinone_bannerRotator_text_line textElement11_universal" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0" data-delay="0">Up to 5 types of banners</div>
			<div class="allinone_bannerRotator_text_line textElement12_universal" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">Each with <a href="###" target="_blank">multiple</a> SKINS</div>
		</div>
		<div id="allinone_bannerRotator_photoText2" class="allinone_bannerRotator_texts">
			<div class="allinone_bannerRotator_text_line textElement21_universal" data-initial-left="550" data-initial-top="60" data-final-left="550" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects</div>
			<div class="allinone_bannerRotator_text_line textElement22_universal" data-initial-left="550" data-initial-top="125" data-final-left="550" data-final-top="125" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_bannerRotator_photoText3" class="allinone_bannerRotator_texts">
			<div class="allinone_bannerRotator_text_line textElement31_universal" data-initial-left="480" data-initial-top="60" data-final-left="50" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
			<div class="allinone_bannerRotator_text_line textElement32_universal" data-initial-left="0" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
			<div class="allinone_bannerRotator_text_line textElement33_universal" data-initial-left="50" data-initial-top="250" data-final-left="50" data-final-top="110" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
		</div>
		<div id="allinone_bannerRotator_photoText4" class="allinone_bannerRotator_texts">
			<div class="allinone_bannerRotator_text_line textElement41_universal" data-initial-left="50" data-initial-top="0" data-final-left="50" data-final-top="260" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
			<div class="allinone_bannerRotator_text_line textElement42_universal" data-initial-left="50" data-initial-top="384" data-final-left="50" data-final-top="240" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
		</div>
		<div id="allinone_bannerRotator_photoText5" class="allinone_bannerRotator_texts">
			<div class="allinone_bannerRotator_text_line textElement51_universal" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="52" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="###" target="_blank">Cool Title Right Here</a></div>
			<div class="allinone_bannerRotator_text_line textElement52_universal" data-initial-left="400" data-initial-top="110" data-final-left="400" data-final-top="92" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis <a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank"> aute irure </a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
			<div class="allinone_bannerRotator_text_line textElement53_universal" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="262" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="###" target="_blank">Click - this is a button</a></div>
		</div>
	</div>
</div>
<!-- 代码结束 -->

               







<!-- 以下是统计和广告，与演示无关，不必理会 -->
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:50px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>

</body>
</html>